// 目标: 封装axios自定义工具函数, 负责整个项目网络请求发起和接收
// 基于 axios 封装的请求模块
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// axios.create()创建自定义axios函数, 比直接引入的, 可以多设置一些配置项
// 请求时真正url是 baseURL + url拼接后, 发送请求
const instance = axios.create({
  baseURL: 'http://geek.itheima.net' // 基地址
})

// 请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 使用场景: 统一携带token
  const token = store.state.token
  if (token) { // 登录页面无需携带
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response
}, function (error) {
  // 4xx和5xx都会进入此函数
  // 错误对象用dir进行详细打印, 才能看到里面属性
  if (error.response.status === 401) {
    // 身份过期, 前端需要做
    // (1): 清除本地存储一切
    // (2): 跳转到登录页面
    localStorage.clear()
    router.replace('/login')
  }
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 旭哥思考: 可能以后我会换掉axios, 发送的参数配置项不确定 (优化思想-大量项目经验)
// 中间用统一名字接收, 函数内如何使用, 统一在这里处理
// 好处: 逻辑页面直接还用这5个名配置项传入, 将来如果内部改变, 不需要动逻辑页面代码
// 只需要在这接收后, 在函数内自己做处理即可(方便将来请求库的切换)
// 导出自定义函数, 参数对象解构赋值
export default ({ url, method = 'get', params = {}, data = {}, headers = {} }) => {
  // url就是api里要请求的地址
  return instance({
    url: url,
    method: method,
    params: params,
    data: data,
    headers: headers
  })
  // return Promise对象到逻辑页面去接收请求响应的结果数据
  // return 到本次函数调用的地方
}

// 以后换库, 只需要改这里, 逻辑页面不用动, 保证代码的复用性和独立性(高内聚低耦合)
//   return $.ajax({
//     url: url,
//     type: method,
//     data: data,
//     header: headers
//   })
